<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/inc/taglib.inc"%>
<%@ include file="/WEB-INF/inc/script.inc"%>
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="${base}">
<title>中金通 | 首页</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/plugins/dataTables/dataTables.responsive.css"
	rel="stylesheet">

<link href="css/plugins/dataTables/dataTables.tableTools.min.css"
	rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">
<!-- <link href="css/echartsHome.css" rel="stylesheet"> -->
<link href="css/style.css" rel="stylesheet">

<link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
	<style type="text/css">
	.main {
			    height: 400px;
			    /*width: 778px !important;*/
			    overflow: hidden;
			    padding : 10px;
			    margin-bottom: 10px;
			    border: 1px solid #e3e3e3;
			    -webkit-border-radius: 4px;
			       -moz-border-radius: 4px;
			            border-radius: 4px;
			    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
			       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
			            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
			}
    </style>
</head>
<body>
	<div id="wrapper">
		<!-- 左侧菜单 -->
		<jsp:include page="/WEB-INF/jsp/common/main-menu.jsp"></jsp:include>

		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom">
				<!-- 头部工具栏区 -->
				<jsp:include page="/WEB-INF/jsp/common/main-header.jsp"></jsp:include>
			</div>
			<!-- <div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-10">
					<h2>数据统计</h2>
					<ol class="breadcrumb">
						<li><a href="common/platform">Home</a></li>
						<li><a>数据统计</a></li>
						<li class="active"><strong>首页</strong></li>
					</ol>
				</div>
				<div class="col-lg-2"></div>
			</div> -->

			<div class="row" style="margin-top: 10px;">
				<div class="col-md-12">
					<div class="tabs-container">
						<!-- <ul class="nav nav-tabs">
							<li class="active"><a href="indexStats/show">数据汇总</a></li>
						</ul> -->
						<div class="tab-content">
							<div class="tab-pane active">
								<div class="panel-body">
									<div
										class="wrapper wrapper-content animated fadeInRight ecommerce">

										 <div class="ibox-content m-b-sm border-bottom" style="display:none">
											<div class="row">
												<div class="col-sm-4">
													<div class="form-group">
														<label class="control-label" for="date_added">日期</label>
														<div class="input-group date">
															<span class="input-group-addon"><i
																class="fa fa-calendar"></i></span><input id="date_added"
																type="text" name="startTime" class="form-control"
																data-date-format="yyyy-mm-dd">
														</div>
													</div>
												</div>

												<div class="col-sm-4">
													<div class="form-group">
														<label class="control-label" for="date_modified">至</label>
														<div class="input-group date">
															<span class="input-group-addon">至 <i
																class="fa fa-calendar"></i></span><input id="date_modified"
																type="text" name="endTime" class="form-control"
																data-date-format="yyyy-mm-dd">
														</div>
													</div>
												</div>
											</div>
											<div class="row">
												<div class="form-group">
													<div class="col-sm-4">
														<button type="button" id="btn_confirm_allot_employee"
															class="btn btn-primary">查询</button>
													</div>
												</div>
											</div>
										</div>
										<div class="row">
										<div class="col-lg-12">
						                    <div ><!-- class="ibox float-e-margins" -->
						                        <div ><!-- class="ibox-content" -->
						                            <table id="modelEditable_2" class="table table-striped table-bordered table-hover dataTable no-footer">
						                                <thead>
						                                <tr>
						                                    <th style="text-align:center;" colspan="4">即将到期基金</th>
						                                </tr>
						                                <tr>
						                                    <th>日期</th>
						                                    <th>近30天</th>
						                                    <th>近14天</th>
						                                    <th>近7天</th>
						                                </tr>
						                                </thead>
						                                <tbody>
						                                	<tr>
						                                		<td>数量</td>
						                                		<td>${ThirtyDuration}笔</td>
						                                		<td>${FoutyDuration}笔</td>
						                                		<td>${SevenDuration}笔</td>
						                                    </tr>
						                                </tbody>
						                            </table>
						
						                        </div>
						                    </div>
						                </div> 
						                </div>
										<div class="row">
						                <div class="col-lg-12">
						                    <div ><!-- class="ibox float-e-margins" -->
						                        <div ><!-- class="ibox-content" -->
						                            <table id="modelEditable" class="table table-striped table-bordered table-hover dataTable no-footer">
						                                <thead>
						                                <tr>
						                                    <th>昨日新增投资人</th>
						                                    <th>昨日预约数</th>
						                                    <th>昨日销售额</th>
						                                </tr>
						                                </thead>
						                                <tbody>
						                                	<tr>
						                                		<td>${investorYestodayCount}人</td>
						                                		<td>${appointmentYestodayCount}条</td>
						                                		<td>${paySerialYestodayAmount}万</td>
						                                    </tr>
						                                </tbody>
						                            </table>
						
						                        </div>
						                    </div>
						                </div>
						            </div>
						            <div class="row">
									      <div class="col-sm-6">
									           <div class="form-group">
									                <table id="modelEditable" class="table table-striped table-bordered table-hover dataTable no-footer">
						                                <thead>
						                                <tr>
						                                    <th>本月排行</th>
						                                    <th>理财师</th>
						                                    <th>销售额</th>
						                                </tr>
						                                </thead>
						                                <tbody>
							                                <c:forEach items="${emTopFive}" var="topfive" varStatus="status">
											       			    <tr>
							                                		<td>TOP${status.index+1}</td>
							                                		<td>${topfive.name}</td>
							                                		<td><fmt:formatNumber type="number" value="${topfive.saleAmount/10000}" maxFractionDigits="0"/>万</td>
						                                		</tr>
															</c:forEach>
						                                </tbody>
						                            </table>
									             </div>
									       </div> 
									                    
									      <div class="col-sm-6">
									            <div class="form-group">
									                   <table id="modelEditable" class="table table-striped table-bordered table-hover dataTable no-footer">
						                                <thead>
						                                <tr>
						                                    <th>本月排行</th>
						                                    <th>理财师团队</th>
						                                    <th>销售额</th>
						                                </tr>
						                                </thead>
						                                <tbody>
						                                	<c:forEach items="${emGroupTopFive}" var="topfive" varStatus="status">
											       			    <tr>
							                                		<td>TOP${status.index+1}</td>
							                                		<td>${topfive.name}</td>
							                                		<td><fmt:formatNumber type="number" value="${topfive.saleAmount/10000}" maxFractionDigits="0"/>万</td>
						                                		</tr>
															</c:forEach>
						                                </tbody>
						                            </table>    	
									             </div>
									        </div>
									    </div>
									    <input id="state" type="text" style="display:none" value = '3'>
									    <div id="chartProgress" class="main" style="height:<c:if test="${size >= 16}"><c:out value="${(size-15)*24 + 400}"/></c:if><c:if test="${size < 16}">400</c:if>px"></div>
										<div class="col-md-12">
			                	 <div id="mainOrder" style="height:500px;border:1px solid #fff;padding:10px;"></div>
								 <div id="mainInvestor" style="height:500px;border:1px solid #fff;padding:10px;"></div>
								 <div id="mainAppointment" style="height:500px;border:1px solid #fff;padding:10px;"></div>
							 </div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

			<!-- 底部版权 -->
			<jsp:include page="/WEB-INF/jsp/common/main-footer.jsp"></jsp:include>

		</div>
	</div>

	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
	<script src="js/jquery.serialize-object.min.js" type="text/javascript"></script>
	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>
	<script src="js/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
	<!-- Data picker -->
	<script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>

	<!-- Data Tables -->
	<script src="js/plugins/dataTables/jquery.dataTables.min.js"></script>
	<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script src="js/plugins/dataTables/dataTables.responsive.js"></script>
	<script src="js/plugins/dataTables/dataTables.tableTools.min.js"></script>

	<!-- 业务js -->
	
	
	<!-- eCharts -->
	<script src="js/echart/echarts-y.js"></script>
	<script src="js/echarts-all.js"></script>
	
	
	<script src="js/stats/perfromStats/utils.js?v=${jsVersion}"></script>
    <script src="js/stats/perfromStats/performDay.js?v=${jsVersion}"></script>
    <script src="js/investor/utils.js?v=${jsVersion}"></script>

	<!-- Page-Level Scripts -->
	<script>
		$(document).ready(function() {
			
			require.config({
	            paths: {
	                echarts: './js/echart'
	            }
	        });
	        require(
	            [
	                'echarts',
	                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
	                'echarts/chart/bar'
	            ],
	            function (ec) {
	                var myChart = ec.init(document.getElementById('chartProgress'));
	                var zrColor = require('zrender/tool/color');
	                var colorList = [
	                  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
	                  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
	                ];
	                var itemStyle = {
	                	    normal: {
	                	        color: function(params) {
	                	          if (params.dataIndex < 0) {
	                	            // for legend
	                	            return zrColor.lift(
	                	              colorList[colorList.length - 1], params.seriesIndex * 0.1
	                	            );
	                	          }
	                	          else {
	                	            // for bar
	                	            return zrColor.lift(
	                	              colorList[params.dataIndex], params.seriesIndex * 0.1
	                	            );
	                	          }
	                	        }
	                	    }
	                	};
	                var option = {
	                	    title : {
	                	        text: '产品募集进度'
	                	    },
	                	    tooltip : {
	                			trigger: "item",
	                			axisPointer: {
	                				type: "shadow",
	                				shadowStyle: {
	                					color: "rgba(255, 255, 255, 0.1)",
	                					width: "auto",
	                					type: "default"
	                				}
	                			},
	                	      	formatter: function(params) {
	                	          // for text color
//	                	          console.debug(params);
	                	          var res = '<div style="color:' + '">';
	                	          //        	                	            res += '<strong>' + params[0].seriesName[params[0].dataIndex] + ' : '+params[0].value + '%</strong>'
	                	          res += '<strong>' + params.seriesName + ' : '+fmoney(params.value) + '%</strong>'
	                	          res += '<br/>募集规模:' + fmoney(params.series.scale/10000) + '万元<br/>已募集金额：' + fmoney(params.series.amount/10000) + '万元'; 
	                	          res += '</div>';
	                	          return res;
	                	        }
	                		},
	                	    legend: {
	                	    	data:[],
	                	    	orient:'horizontal',
                	    		x: 'right', // 'center' | 'left' | {number},
                	    	    y: 'center', // 'center' | 'bottom' | {number}
                	    	    data:[],
                	    	    z:0,
	                	    },
	                	    grid:{
	                	    	x:'20',
	                	    	x2:'300'
	                	    },
	                	    toolbox: {
	                	        show : true,
	                	        feature : {
//	                	            dataView : {show: true, readOnly: false},
//	                	            restore : {show: true},
	                	            saveAsImage : {show: true}
	                	        }
	                	    },
	                	    xAxis : [
	                	        {
	                	            type : 'value',
	                	            axisLabel : {
	                	                formatter: '{value} %'
	                	            },
	                	            scale:true,
	                	        	splitNumber:10,
	                	        	min:0,
	                	        	max:100,
	                	        }
	                	    ],
	                	    yAxis : [
	                	        {
	                	            type : 'category',
	                	            data : [''],
	                	        	
	                	        }
	                	    ],
	                	    series : [
	                	        {
	                	            name:'',
	                	            type:'bar',
	                	            itemStyle: itemStyle,
	                	            data:[30, 40, 20, 60, 100, 70]
	                	        },
	                	    ]
	                	};
	                $.ajax({
	                	"contentType":"application/json; charset=UTF-8",
                        "dataType" : 'json',
                        "type" : "POST",
                        "url" : ctx + "/productStats/productRecruitProgress",
                        "data" : '',
                        "success" : function(msg){
                        	if (msg.code == 0) {
                        		bootbox.alert(msg.message);
                        		return;
                        	}
                        	if (msg.code == 1) {
//                        		option.legend.data = msg.data.productNameList;
                        		if(msg.data.productNameList == undefined || msg.data.productNameList.length == 0){
                        			option.yAxis[0].data = [];
                        			option.legend.data = [];
                        			option.series[0].name = [];
                            		option.series[0].data = [];
                            		option.series[0].scale = [];
                            		myChart.hideLoading();
                            		myChart.setOption(option);
                            		return;
                        		}
                        		var num = msg.data.productNameList.length;
                        		var nameList = new Array();
                        		for(var i = 0;i < num;i+=1){
                        			nameList.push(msg.data.productNameList[i]);
//                        			if(msg.data.productNameList[i+1] != undefined){
//                        				nameList.push(msg.data.productNameList[i+1]);
//                        			}
                        			if(i != num - 1){
                        				nameList.push('');
                        			}
                        		}
                        		option.legend.data = nameList;
                        		if(num > 0){
                        			var array = new Array();
//                        			var arr = new Array();
                        			for(i = 0;i < num;i++){
                        				
                        				var p = {
                        						name : msg.data.productNameList[i],
                        						data: [msg.data.productRecruitProgressEleBeanList[i].recruitProgress],
                        						type: "bar",
                        						scale: msg.data.productRecruitProgressEleBeanList[i].scale,
                        						amount:msg.data.productRecruitProgressEleBeanList[i].amount
                        				}
                        				array.push(p);
//                        				arr.push(p);
                        			}
                        			option.series = array;
//                        			option.legend.data = arr;
                        		}
//                        		option.grid.x = '10%';
                        		myChart.hideLoading();
                        		myChart.setOption(option);
//                        		console.log(JSON.stringify(option));
//                        		console.debug(option)
                        	} else {
                        		bootbox.alert("获取产品募集销售数据失败！");
                        		myChart.setOption(option);
                        	}
                        }
	                })
	                
//	                myChart.setOption(option);
	            }
	        );
	        function fmoney(s, n) {
        		if(s == 0){
        			return '0.00';
        		}
        	   if(s == ""|| undefined == s){
        		   return "--";
        	   }
               n = n > 0 && n <= 20 ? n : 2;  
               s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";//更改这里n数也可确定要保留的小数位  
               var l = s.split(".")[0].split("").reverse(),  
               r = s.split(".")[1];  
               t = "";  
               for(i = 0; i < l.length; i++ )  
               {  
                  t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
               }
               var str = t.split("").reverse().join("") + "." + r.substring(0,2);
               return str;//保留2位小数  如果要改动 把substring 最后一位数改动就可  
            }
	        
	        initDateInput();
        	queryData();
        	
        	$('#date_added').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
            $('#date_modified').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
		});
	</script>
</body>
</html>